SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>File select</title>

</head>

File select

</h1>

</header>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">In <a href="HTML" title="HTML">HTML</a>, a file-select control is a component of a <a href="Form_(web)" class="mw-redirect" title="Form (web)">web form</a> with which a user can select a local file. When the form is submitted (perhaps together with other form data), the file is uploaded to the <a href="Web_server" title="Web server">web server</a>. There, when the file arrives, some action usually takes place, such as saving the file on the web server. However, the particular action that takes place is determined by the <a href="Server-side_scripting" title="Server-side scripting">server-side script</a> to which the form is submitted.

<div class="mw-heading mw-heading2"><h2 id="Code_example">Code example</h2></div>

Here is a code example of a web form with a file-select control. It is the <code>input</code> element with <code>type="file"</code> that creates the file-select control.

<div>

</div>

</form>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Rendering">Rendering</h2></div>

When it comes to the rendering on the screen of a file-select control, there is some variation among <a href="Web_browser" title="Web browser">web browsers</a>. Typically, on a Windows-based platform, user agents will render a file-select control as a text field, together with a "Browse" button. When the "Browse" button is pressed, a <a href="File_dialog" title="File dialog">file dialog</a> opens, with which actual file selection on one's platform can take place. After selection, the filename of the selected file is displayed in the text field. Alternatively, instead of using the "Browse" button, the filename can be entered directly in the text field.

Some browsers, notably <a href="Firefox" title="Firefox">Firefox</a>,<a href="#cite_note-firefox-vuln-info-1">[1]</a> no longer allow a filename to be typed directly in. This is a security measure - it is possible to trick the user into uploading confidential information.<a href="#cite_note-juniper-2">[2]</a>

<div class="mw-heading mw-heading2"><h2 id="Functionality">Functionality</h2></div>

The mechanism for form-based file upload was originally proposed in RFC 1867 (published November 1995), as an extension to HTML 2.0 (RFC 1866), after its publication. Form-based file upload then was incorporated in HTML 3.2, which explicitly refers to RFC 1867 for further information on form-based file upload.

HTML 4.01 does not, in itself, describe how the file-select control is supposed to work, but it does list RFC 2388 and RFC 1867 as references.<a href="#cite_note-3">[3]</a>

<div class="mw-heading mw-heading3"><h3 id="Multiple_file_selection">Multiple file selection</h3></div>

The intention in RFC 1867 is that a single file-select control should allow selection of multiple files. This intention seems reflected in HTML 4.01, which, for the file-select control- type, states<a href="#cite_note-4">[4]</a>

This control type allows the user to select files so that their contents may be submitted with a form. The INPUT element is used to create a file select control.</blockquote>

It has been noted<a href="#cite_note-jkorpela-5">[5]</a> that the plural "files" in the above quote is an indication that, in HTML 4.01, a single-file select-control still was supposed to handle selection of multiple files and not just a single file.

This situation is being clarified in HTML5 by adding a "multiple" attribute when the file input should accept multiple files. The current draft specifies the new behavior to be: <blockquote>Unless the multiple attribute is set, there must be no more than one file in the list of selected files.<a href="#cite_note-6">[6]</a></blockquote>

<div class="mw-heading mw-heading3"><h3 id="Accept_attribute">Accept attribute</h3></div>

RFC 1867 also introduced the <code>accept</code> attribute for the <code>input</code> element. This would enable file-type filtering based on <a href="MIME_type" class="mw-redirect" title="MIME type">MIME type</a> for the file-select control.

In addition, it is proposed that the INPUT tag have an ACCEPT attribute, which is a list of comma-separated media types.

</blockquote>

If an ACCEPT attribute is present, the browser might constrain the file patterns prompted for to match those with the corresponding

appropriate file extensions for the platform.

</blockquote>

Thus, a user-agent may restrict file selection, as, for example, in the following, restricted to GIF and PNG images or any images:

</pre></div>

On a Windows platform, this might mean that the user agent would show files only of the types specified in the browse-file dialog.

<div class="mw-heading mw-heading2"><h2 id="Browser_limitations">Browser limitations</h2></div>

Basic support for the file-select control was adopted quickly by browser vendors. For example, already <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 4,<a href="#cite_note-7">[7]</a> <a href="Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a> 2.0 and <a href="Opera_(web_browser)" title="Opera (web browser)">Opera</a> 3.5<a href="#cite_note-opera_history-8">[8]</a> recognized the <code>input</code> element of <code>type="file"</code> as a file-select control.

However, most modern browsers still do not implement the file-select control as it was intended, or lack certain features.<a href="#cite_note-jkorpela-5">[5]</a>

<div class="mw-heading mw-heading3"><h3 id="Cannot_select_multiple_files">Cannot select multiple files</h3></div>

Form-based upload of multiple files with a single file-select control is supported in current versions of Chrome, Firefox, Internet Explorer, Safari and Opera. One source states<a href="#cite_note-jkorpela-5">[5]</a> that Opera supports multiple-file selection through a single file-select control. This was true for Opera versions starting from 3.5, in which the file-upload feature was introduced.<a href="#cite_note-opera_history-8">[8]</a> However, with the first beta release of Opera 7, this function was no longer available. Firefox version 3.6 started supporting multiple-file selection,<a href="#cite_note-firefox_3.6-9">[9]</a> allowing the developer some limited access to the files themselves prior to being uploaded to the server, via the <a href="HTML5_File_API" title="HTML5 File API">HTML5 File API</a>.<a href="#cite_note-mdc_using_files-10">[10]</a> This feature also allows users to drag-and-drop files from external applications (such as <a href="Windows_Explorer" class="mw-redirect" title="Windows Explorer">Windows Explorer</a>) directly into the web application. One notable example of support for this feature is <a href="Gmail" title="Gmail">Gmail</a> allowing attachments to be added in this way.

HTML5 allows multiple file uploads using the multiple attribute on input elements.<a href="#cite_note-11">[11]</a>

<div class="mw-heading mw-heading4"><h4 id="JavaScript_alternative">JavaScript alternative</h4></div>

One solution is to use <a href="Client-side_scripting" class="mw-redirect" title="Client-side scripting">client-side scripting</a> such as <a href="JavaScript" title="JavaScript">JavaScript</a> for generating an extra file-select control for each file the user selects for upload. Using <a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS</a>, these extra file-select controls may be set not to display. An example of this technique is demonstrated in the <a rel="nofollow" class="external text" href="http://www.fyneworks.com/jquery/multiple-file-upload/">Multiple File Upload plugin</a> for <a href="JQuery" title="JQuery">jQuery</a>. In this manner, the multiple-file upload problem is solved by providing as many file-select controls as the user has files to upload. Still, this does not solve the problem of selecting multiple files for upload in Internet Explorer.

<div class="mw-heading mw-heading3"><h3 id="Accept_attribute_support">Accept attribute support</h3></div>

The accept attribute is currently supported by Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ and Microsoft Internet Explorer 10+.

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=388784">"388784 – (CVE-2007-3511) Firefox file input focus stealing vulnerability"</a>. Bugzilla.mozilla.org. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-juniper-2"><a href="#cite_ref-juniper_2-0">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://archive.today/20130221164034/http://www.juniper.net/security/auto/vulnerabilities/vuln24725.html">"Mozilla Firefox OnKeyDown Event File Upload Vulnerability"</a>. Juniper.net. 2010-11-15. Archived from <a rel="nofollow" class="external text" href="http://www.juniper.net/security/auto/vulnerabilities/vuln24725.html">the original</a> on 2013-02-21. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-3"><a href="#cite_ref-3">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html401/references.html#ref-RFC2388">"HTML 4 Specification References"</a>. W3.org. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-4"><a href="#cite_ref-4">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html401/interact/forms.html#file-select">"Forms in HTML documents"</a>. W3.org. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-jkorpela-5">^ <a href="#cite_ref-jkorpela_5-0">a</a> <a href="#cite_ref-jkorpela_5-1">b</a> <a href="#cite_ref-jkorpela_5-2">c</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://jkorpela.fi/forms/file.html">"File input (or "upload") in HTML forms"</a>. Cs.tut.fi. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-6"><a href="#cite_ref-6">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/html51/sec-forms.html#file-upload-state-typefile">"HTML 5.1 specification"</a>. W3C.</cite>

</li>

<li id="cite_note-7"><a href="#cite_ref-7">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://msdn2.microsoft.com/en-us/library/ms535263.aspx">"input type=file Object"</a>. Msdn2.microsoft.com. 2013-07-22. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-opera_history-8">^ <a href="#cite_ref-opera_history_8-0">a</a> <a href="#cite_ref-opera_history_8-1">b</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.blooberry.com/indexdot/history/opera.htm">"Browser History: Opera"</a>. Blooberry.com. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-firefox_3.6-9"><a href="#cite_ref-firefox_3.6_9-0">^</a> <cite id="CITEREFon_December_10,_2009_by_Paul_Rouget2009" class="citation web cs1">on December 10, 2009 by Paul Rouget (2009-12-10). <a rel="nofollow" class="external text" href="https://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/">"multiple file input in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog"</a>. Hacks.mozilla.org. Retrieved 2013-09-02.</cite><code class="cs1-code">{{cite web}}</code>: CS1 maint: numeric names: authors list (link)

</li>

<li id="cite_note-mdc_using_files-10"><a href="#cite_ref-mdc_using_files_10-0">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en/Using_files_from_web_applications">"Using files from web applications - MDC"</a>. Developer.mozilla.org. 2013-08-23. Retrieved 2013-09-02.</cite>

</li>

<li id="cite_note-11"><a href="#cite_ref-11">^</a> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/html51/sec-forms.html#the-multiple-attribute">HTML 5.1 specification: 4.10.5.3 Common input element attributes</a>

</li>

</ol></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html4/interact/forms.html#file-select">Specification of the file select control from W3C</a></li>

<li><a rel="nofollow" class="external text" href="https://programmerdesk.com/php-file-upload-in-database-with-error-handling/">File Upload with error handling</a></li></ul></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2023-12-17" href="https://en.wikipedia.org/wiki/?title=File_select&oldid=1190414275">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>